<template>
  <div class="card header">
    <van-row>
      <van-col @click="toCitys()" span="4" class="city">
        <div v-show="cityShow">
            {{ cityNm }} <van-icon name="arrow-down" color="#fff" />
        </div>
      </van-col>
      <van-col class="diner" span="16">{{ msg }}</van-col>
      <van-col  @click="toHome()"  class="faulty-letter" span="4"><van-icon name="search" size="32"  /></van-col>
    </van-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "VueMovieHeader",
  props: {
    msg: {
      type: String,
      default: "心动影院",
    },
    cityShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },

  mounted() {},
  computed: {
    ...mapState(["cityNm"]),
  },
  methods: {
     toHome(){
        this.$router.push("/home");
     },
    toCitys() {
      this.$router.push("/citys");
    },
  },
};
</script>


<style lang="less" scoped> 
:root {
  box-sizing: border-box;
  margin: 0;
}

*,
::before,
::after {
  box-sizing: inherit;
  margin: inherit;
  
}

.container {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  background: #222222;
  width: 100vw;
  height: 100vh;
}

.card {
    background: transparent;
    border-bottom: 1px solid #28d7fe;
    box-shadow: inset 0 0 1vw #1041ff, 0 0 3vw #1041ff, inset 0 0 6vw #1041ff, 0 0 6vw #1041ff, 0 0 .4vw #8bfdfe;
 
   
}

.diner {
  font-size: 72px;
  font-family: 'Fredoka One', serif;
  display: block;
  color: transparent;
  paint-order: fill stroke markers;
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: #fed128;
  text-shadow: 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 0.4vw #fed128;
  font-weight: bold;
  letter-spacing: 5px;
}

.faulty-letter {
  -webkit-text-stroke-color: #444444;
  text-shadow: 0 0 1vw #222222, 0 0 1vw #222222, 0 0 1vw #222222, 0 0 0.2vw #444444;
  -webkit-animation-name: blink;
          animation-name: blink;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: 9999;
          animation-iteration-count: 9999;
}

.welcome {
  display: block;
  color: #28d7fe;
  font-size: 40px;
  font-family: Pacifico, Parisienne, serif;
  text-shadow: 0 0 3vw #1041ff, 0 0 3vw #1041ff, 0 0 10vw #1041ff, 0 0 10vw #1041ff, 0 0 0.4vw #8bfdfe;
  font-weight: normal;
}

@-webkit-keyframes blink {
  from,
  38%,
  43.25%,
  49.5%,
  51.125%,
  to {
    -webkit-text-stroke-color: #444444;
  text-shadow: 0 0 1vw #222222, 0 0 1vw #222222, 0 0 1vw #222222, 0 0 0.2vw #444444;
  }

  38.5%,
  43%,
  50%,
  51% {
    -webkit-text-stroke-color: #fed128;
  text-shadow: 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 0.4vw #fed128;
  }
}

@keyframes blink {
  from,
  38%,
  43.25%,
  49.5%,
  51.125%,
  to {
    -webkit-text-stroke-color: #444444;
  text-shadow: 0 0 1vw #222222, 0 0 1vw #222222, 0 0 1vw #222222, 0 0 0.2vw #444444;
  }

  38.5%,
  43%,
  50%,
  51% {
    -webkit-text-stroke-color: #fed128;
  text-shadow: 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 0.4vw #fed128;
  }
}
.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  height:50px;
  line-height: 50px;
  text-align: center;
  color: #222;
  background-color: #222222;
  .van-row {
    .van-col:nth-child(1) {
      font-size: 14px;
      color:#fff;
    }
    .van-col:nth-child(2) {
      font-size: 20px;
    }
     .van-col:nth-child(3) {
      font-size: 32px;
      color:grey
    }
  }
}
</style>